<template>
  <a-form layout="inline" ref="formRef">
    <a-form-item label="">
      <a-select
        ref="select"
        placeholder="请选择项目"
        allowClear
        v-model:value="formState.projectId"
        @change="getDtus"
        class="w-80"
      >
        <a-select-option v-for="i in projects" :key="i.id" :value="i.id">{{
          i.name
        }}</a-select-option>
        <!--        <a-select-option value="a">项目a</a-select-option>-->
      </a-select>
    </a-form-item>
    <a-form-item label="">
      <a-select
        ref="select"
        placeholder="请选择DTU"
        allowClear
        v-model:value="formState.dtuId"
        @change="getHubs"
        class="w-80"
      >
        <a-select-option v-for="i in dtus" :key="i.id" :value="i.id">{{ i.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="">
      <a-select
        ref="select"
        placeholder="请选择采集设备"
        allowClear
        v-model:value="formState.gatherDeviceId"
        @change="getSensors"
        class="w-80"
      >
        <a-select-option v-for="i in gatherDevices" :key="i.id" :value="i.id">{{
          i.name
        }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="">
      <a-select
        ref="select"
        placeholder="请选择通道"
        allowClear
        v-model:value="formState.sensorId"
        class="w-80"
      >
        <a-select-option v-for="i in sensors" :key="i.id" :value="i.id"
          >通道{{ i.channel }}</a-select-option
        >
      </a-select>
    </a-form-item>
    <a-form-item class="">
      <a-button type="primary" @click="onSearch"> 查询 </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defHttp } from '/@/utils/http/axios';
import { message } from 'ant-design-vue';
function initFormData() {
  return {
    projectId: null,
    dtuId: null,
    gatherDeviceId: null,
    sensorId: null,
  };
}
export default {
  data() {
    return {
      formState: initFormData(),
      projects: [],
      dtus: [],
      gatherDevices: [],
      sensors: [],
    };
  },
  components: {
    message,
  },
  created() {
    this.getProjects();
  },
  methods: {
    getProjects() {
      defHttp
        .get({
          url: '/project/search',
          params: { pageIndex: 1, pageSize: 500, keyword: '' },
        })
        .then((res) => {
          this.projects = res.data.pageList;
        });
    },
    getDtus(projectId) {
      if (!projectId) return;
      this.formState.dtuId = null;
      this.dtus = [];
      this.formState.gatherDeviceId = null;
      this.gatherDevices = [];
      this.formState.sensorId = null;
      this.sensors = [];
      defHttp
        .get({
          url: '/dtu/get-by-project-id',
          params: { projectId: this.formState.projectId },
        })
        .then((res) => {
          this.dtus = res.data;
        });
    },
    // getSensorTypes() {
    //   defHttp
    //     .get({ url: `/Project/get-sensor-type`, params: { id: this.formState.projectId } })
    //     .then((res) => (this.types = res.data));
    // },
    getHubs(dtuId) {
      if (!dtuId) return;
      this.formState.gatherDeviceId = null;
      this.gatherDevices = [];
      this.formState.sensorId = null;
      this.sensors = [];
      defHttp
        .get({
          url: '/gather-device/get-by-dtu-id',
          params: { dtuId },
        })
        .then((res) => {
          this.gatherDevices = res.data;
        });
    },
    getSensors(gatherDeviceId) {
      if (!gatherDeviceId) return;
      this.formState.sensorId = null;
      this.sensors = [];
      defHttp
        .get({
          url: '/sensor/get-by-gather-device-id',
          params: { gatherDeviceId },
        })
        .then((res) => {
          this.sensors = res.data;
        });
    },

    onSearch() {
      const { projectId, gatherDeviceId, sensorId } = this.formState;
      // if (projectId == null) {
      //   message.info('请选择对应项目!');
      //   return;
      // }
      // if (gatherDeviceId == null) {
      //   message.info('请选择对应采集器!');
      //   return;
      // }
      // if (sensorId == null) {
      //   message.info('请选择对应传感器!');
      //   return;
      // }

      this.$emit('action', this.formState);
    },
  },
};
</script>

<style>
</style>
